@space-2: 4px;
@space-3: 7px;

.absolute-full {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.img-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  transition: box-shadow 0.2s ease-in-out 0s, transform 0.2s ease-in-out 0s;
  border-radius: var(--rps-img-border-radius);
  img {
    .absolute-full();
    border-radius: inherit;
  }
  .loading-wrapper {
    .absolute-full();
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &:hover {
    box-shadow: 0 @space-2 @space-3 0 rgba(0, 0, 0, 0.8);
  }
}

body[arco-theme='dark'] .img-wrapper:hover {
  box-shadow: 0 @space-2 @space-3 0 rgba(255, 255, 255, 0.8);
}
